<template>
<div class="login">
  <div class="login_box4">
    <div class="login_4">
      <div class="img">
        <img src="../../assets/image/home/home (7).png" />
      </div>
    </div>
  </div>
  <div class="login_1"></div>
  <div class="login_2">
    <div class="login_box">
      <div class="left">
        <img src="../../assets/image/home/dl.png" />
      </div>
      <div class="right">
        <div class="right_1">
          <div class="title">
            <span>登&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;录</span>
          </div>
          <el-form :model="ruleForm" ref="ruleForm" class="demo-ruleForm">
            <p class="login_i">
              <span class="login_i_1"><i class="el-icon-mobile-phone"></i></span>

              <input type="text" placeholder="邮箱/昵称/手机号" class="login_p_3" />
            </p>

            <p class="login_s">
              <span class="login_i_2"><i class="el-icon-lock"></i></span>

              <input type="password" placeholder="请输入密码" class="login_p_2" />
            </p>

            <p class="login_p_1">
              <input type="checkbox" /><span class="login_span_1">我已阅读并同意相关《隐私条约》</span>
            </p>

            <el-form-item>
              <div @click="submitForm('ruleForm')" class="dl">
                登录
              </div>
            </el-form-item>
            <div class="bottom">
              <span class="b">忘记密码</span>
              <span class="b1">立即注册</span>
            </div>
          </el-form>
        </div>
        <div class="right_2"></div>
      </div>
    </div>
  </div>
  <Bottom/>
</div>
</template>

<script>
import Bottom from '../../components/Bottom'
export default {
  components: {
    Bottom
  },
  data() {
    return {
      ruleForm: {
        name: '',
        pass: ''
      },
      input: ''
    }
  },
  methods: {
    submitForm() {
      this.$router.push("/index/home")
    }
  }
}
</script>

<style lang="scss" scoped>
.login_p_3 {
  width: 220px;
  height: 26px;
  padding-left: 20px;
  font-size: 14px;
  color: #848484;
}

.login_i_1 {
  position: absolute;
  top:0;
  left:5px;
}
.login_i{
  position: relative;
}
.login_s{
  position: relative;
}
.login_i_2 {
  position: absolute;
  top:10px;
  left:5px;
}

.login_p_2 {
  margin-top: 10px;
  width: 220px;
  height: 26px;
  padding-left: 20px;
  font-size: 14px;
  color: #848484;
}

/deep/.el-input__inner {
  width: 220px;
  height: 42px;
}

.login_p_1 {
  margin-top: 12px;
}

.login_span_1 {
  font-size: 10px;
  color: #848484;
  margin-left: 5px;
}

.login {
  width: 100%;
  height: 100%;

  .login_box4 {
    width: 100%;
    height: 119px;

    .login_4 {
      width: 1310px;
      margin: 0 auto;

      .img {
        width: 421px;
        height: 84px;
        padding: 15px 0 0 64px;

        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }

  .login_1 {
    width: 100%;
    height: 14px;
    background: #960006;
  }

  .login_2 {
    width: 100%;
    .login_box {
      width: 1310px;
      margin: 0 auto;
      height: 100%;
      background: #f2f2f2;
      display: flex;

      .left {
        width: 890px;
        height: 515px;
        margin: 19px 0 19px 18px;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .right {
        width: 312px;
        margin: 19px 0 19px 18px;
        height: 515px;

        .right_1 {
          background: #ffff;
          height: 489px;

          .title {
            height: 133px;
            line-height: 133px;
            text-align: center;
            font-size: 18px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: #000000;
          }

          form {
            width: 204px;
            margin: 0 auto;
          }

          .dl {
            width: 204px;
            height: 31px;
            background: #960006;
            border: 1px solid #8a8a8a;
            border-radius: 16px;
            font-size: 16px;
            font-family: Adobe Heiti Std;
            font-weight: normal;
            color: #ffffff;
            text-align: center;
            line-height: 31px;
            margin-top: 10px;
          }

          .bottom {
            width: 220px;
            display: flex;
            justify-content: space-between;
            height: 24px;
            line-height: 40px;
            font-size: 10px;

            .b {
              color: #960007;
              margin-top: -20px;
            }

            .b1 {
              color: #3fb4b8;
              margin-top: -20px;
            }
          }
        }

        .right_2 {
          height: 23px;
          background: #a41608;
          margin-top: 4px;
        }
      }
    }
  }
}
</style>
